<template>
	<el-row class="type">
		<el-select v-model="type" class="m-2" placeholder="选择类型" clearable>
		    <el-option
		      v-for="item in learnType"
		      :key="item.id"
		      :label="item.name"
		      :value="item.id"
		    />
		  </el-select>
		<el-button type="primary" @click="getLearnList">查询</el-button>
		<el-button type="success" @click="openDialog()">新增</el-button>
	</el-row>
	<el-table :data="learnList" style="width: 100%">
		<!-- id`, `title`, `type`, `keyword`, `result`, `importance`, `keywordRadio -->
		<el-table-column label="id" prop="id"  width="60"/>
		<el-table-column label="名字" prop="name"  width="160" show-overflow-tooltip/>
		<el-table-column label="类型"   width="100">
			<template #default="props">
				{{filterType(props.row.type)}}
			</template>
			
			
		</el-table-column>
		<el-table-column label="描述" prop="description" show-overflow-tooltip/>
		<el-table-column label="排序" prop="sort"  width="60"/>
		<el-table-column label="操作" width="160">
			<template #default="props">
				<el-button type="primary" @click="openDialog(props.row)" size="small">编辑</el-button>
				<el-button type="danger" @click="onDelete(props.row.id)" size="small">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<Dialog ref="dialog" @closeDialog="onCloseDialog($event, getLearnList)" v-if="showDialog"></Dialog>
	<el-pagination
		v-model:current-page="currentPage"
		:page-size="10"
		background
		layout="prev, pager, next,"
		:total="total"
		@current-change="handleCurrentChange"
		style="margin-top:10px ;"
	/>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, nextTick } from 'vue';
import { ElInput } from 'element-plus';
import Dialog from './Dialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';

import useDialog from '@/hooks/useDialog';
const { dialog, showDialog, openDialog, onCloseDialog } = useDialog;

//引入piana
const mainStore = useMainStore();
const { learnType } = storeToRefs(mainStore);

const learnList = ref([]);
const type = ref('')
const { proxy } = getCurrentInstance();


const currentPage = ref(1)
const total  = ref(500)
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  getLearnList()
}

getLearnList();
//初始化获取数据
function getLearnList() {
	console.log(type.value);
	proxy.$get('/learn',{
		page:currentPage.value,
		type:type.value
	}).then(res => {
		if (res.code === 200) {
			console.log(res);
			learnList.value = res.data.list;
			total.value = res.data.total
		}
	});
}

// 删除题目
function onDelete(id) {
	ElMessageBox.confirm('是否确认删除该课程?', '警告!!', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			proxy
				.$post('/learn/delete', {
					id
				})
				.then(res => {
					if (res.code === 200) {
						ElMessage({
							message: '删除成功',
							type: 'success'
						});
						getLearnList();
					}
				});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除'
			});
		});
}

function filterType(type){
	let arr = [...learnType.value]
	
	for (let i = 0; i < arr.length; i++) {
		console.log();
		if(type==arr[i].id){
			return arr[i].name	
		}
	}
}

</script>

<style lang="less" scoped>
.type {
	& > * {
		margin: 5px;
	}
}
.table-item {
	div {
		margin: 20px;
	}
	.title {
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}
}
</style>
